<template>
    <table class="main-table table-form bud-form">
        <colgroup>
            <col width="100px">
            <col width="60px">
            <col width="160px">
            <col width="60px">
        </colgroup>
        <thead>
            <tr>
                <th>开支科目</th>
                <th>预算经费（元）</th>
                <th>主要用途</th>
                <th>预计使用时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-if="data.budgets[0]?.BudgetName?.startsWith('（1）') ">
                <th>1.业务费</th>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr v-for="(v, k) in budgets">
                <th>{{ v.budgetName }}</th>
                <td>
                    <a-flex>
                        <a-input-number v-if="v.budgetAmount >= 0" v-model:value="v.budgetAmount" :bordered="false" :min="0"/>
                    </a-flex>
                </td>
                <td>
                    <a-flex>
                        <a-textarea v-if="v.budgetAmount >= 0" v-model:value="v.budgetUsage" :auto-size="{ minRows: 1 }" :bordered="false" :maxlength="150" />
                    </a-flex>
                </td>
                <td>
                    <date-picker v-if="v.budgetAmount >= 0" v-model:value="v.useTime" :bordered="false" format="YYYY-M-D" />
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>预计经费总额</th>
                <td class="text-left">{{ total }}</td>
                <td class="color-error"><strong>{{
                        approvalAmount > 0 && approvalAmount != total ? `预计经费总额必须等于学校批准经费${approvalAmount}元` : ''
                    }}</strong></td>
                <td></td>
            </tr>
            <tr>
                <th>学校批准经费</th>
                <td class="text-left">{{ approvalAmount >= 0 ? approvalAmount : '待定' }}</td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</template>

<script setup>
import { inject } from 'vue';
import useBudget from './useBudget';

const data = inject("data");
const {
    budgets,
    total,
    approvalAmount,
    overBudget,
    errorStrings,
    validate,
    reset,
} = useBudget(data);

defineExpose({
    budgets,
    overBudget,
    errorStrings,
    validate,
    reset,
});
</script>

<style lang="less" scoped>
.bud-form {
    .a-btn.placeholder {
        display: inline-block;
        width: 2.5em;
    }
}

.paper-container .page-div  {
    table {
        tbody th {
            text-align: left;
            font-weight: normal;
        }
        tfoot {
            th {
                text-align: right;
                font-weight: normal;
            }
            .text-left {
                padding-left: 17px;
                text-align: left;
            }
        }
    }
}
</style>